<template>
  <el-dialog
    id="sDialog"
    title="选择应用系统"
    width="40%"
    append-to-body
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
  >
    <div>
      <div class="header-search">
        <div class="search-item">
          <span class="searchlabel">名称</span>
          <el-input
            v-model="name"
            placeholder="请输入名称"
            size="small"
            clearable
            style="display: inline-block; width: 140px;"
          />
        </div>
        <div class="search-item ml20">
          <span class="searchlabel">应用ID</span>
          <el-input
            v-model="appId"
            placeholder="请输入应用ID"
            size="small"
            clearable
            style="display: inline-block; width: 140px;"
          />
        </div>
        <div class="search-item ml20">
          <el-button
            size="small"
            type="primary"
            @click="handleSearch()"
          >搜索</el-button>
        </div>
        <div class="search-item ml20">
          <el-button
            size="small"
            type="primary"
            @click="handleReset()"
          >重置</el-button>
        </div>
      </div>
      <div ref="content-table" v-loading="loading" class="content-table">
        <el-table :data="tableData" border height="427px" @row-click="rowClick">
          <el-table-column type="index" label="序号" width="60">
            <template slot-scope="scope">
              <span>{{ scope.$index + (pageIndex - 1) * pageSize + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称" />
          <el-table-column prop="appId" label="应用ID" />
        </el-table>
        <div class="pagecont">
          <el-pagination
            :current-page.sync="pageIndex"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getApplicationSystemList } from '../../api/identityAuthentication/common.js'
export default {
  data() {
    return {
      dialogVisible: false,

      name: '',
      appId: '',

      tableData: [],
      pageIndex: 1, // 页码
      pageSize: 8, // 显示多少个
      total: 0, // 获取总数

      loading: false
    }
  },
  created() {},
  methods: {
    onLoad() {
      this.pageIndex = 1
      this.init()
    },
    rowClick(row) {
      this.$emit('cellClick', row)
      this.dialogVisible = false
    },

    handleSearch() {
      this.onLoad()
    },

    init() {
      this.loading = true

      const params = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        name: this.name,
        appId: this.appId
      }
      getApplicationSystemList(params)
        .then(res => {
          this.loading = false

          const { data = {}} = res
          const dataObj = data.data || {}
          this.tableData = dataObj.records || []
          this.total = dataObj.total
        })
        .catch(() => {
          this.loading = false
        })
    },

    handleCurrentChange(val) {
      this.pageIndex = val
      this.init()
    },

    handleReset() {
      this.name = ''
      this.appId = ''
      this.onLoad()
    }
  }
}
</script>
<style lang="scss" scoped="scoped">
.header-search .search-item {
  display: inline-block;
}
.header-search .searchlabel {
  line-height: 32px;
  margin-right: 10px;
}
.content-table {
  margin-top: 20px;

  .el-table {
    overflow-y: auto;
  }
}

.pagecont {
  margin-top: 20px;
  text-align: right;
}
</style>
